<template>
  <ApiOutlined
    class="text-blue-500 cursor-pointer svg-scale"
    @click="showModal"
    title="设备分发"
  />
  <a-modal
    title="分发云端设备"
    v-model:visible="visible"
    :confirm-loading="confirmLoading"
    width="800px"
    @ok="handleOk"
  >
    <DispatchCloudDeviceForm ref="form" :device="device" />
  </a-modal>
</template>

<script lang="ts">
import { defineComponent, PropType, ref } from "vue";
import { ApiOutlined } from "@ant-design/icons-vue";
import DispatchCloudDeviceForm from "../forms/DistributeCloudDeviceForm.vue";
import { CloudDevice } from "model";

export default defineComponent({
  name: "DeviceDistributeModal",
  components: {
    DispatchCloudDeviceForm,
    ApiOutlined,
  },
  props: {
    device: {
      type: Object as PropType<CloudDevice>,
      required: true,
    },
  },
  setup() {
    const form = ref();
    const visible = ref<boolean>(false);
    const confirmLoading = ref<boolean>(false);
    const handleOk = async () => {
      confirmLoading.value = true;
      if (await form.value.onSubmit()) {
        visible.value = false;
      }
      confirmLoading.value = false;
    };
    const showModal = () => {
      visible.value = true;
    };
    return { visible, handleOk, showModal, confirmLoading, form };
  },
});
</script>

<style scoped lang="scss"></style>
